<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${question['context']}+' - 问题详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
<div data-th-replace="layout/common-hade-two"></div>
<div data-th-replace="layout/qa/common-layout-qa"></div>
<div class="cm-bg-fb" id="keyword-question-list-context">
    <div class="container">
        <ol class="breadcrumb">
            <li><a th:href="@{/web/qa/listQuestion}">问答平台</a></li>
            <li class="active" th:text="${#strings.abbreviate(question['context'],10)}"></li>
        </ol>
        <div class="mt20">
            <div class="cm-wbg__bx teacher-item-bx">
                <div class="row">
                    <section class="col-sm-9">
                        <div class="pt10 mt20 ml10 mr10">
                            <article class="question-title__wrap">
                                <input type="hidden" id="questionId" th:value="${question['id']}"/>
                                <input type="hidden" id="questioner" th:value="${question['questioner']}"/>
                                <input type="hidden" id="attender" th:value="${question['attender']}"/>
                                <input type="hidden" id="isFree" th:value="${question['isFree']}"/>

                                <aside class="question-ico"><i class="fa fa-question-circle fs30 c-warning"></i></aside>
                                <section class="mb20" id="question-content">
                                    <p><span class="fs20" th:text="${question['context']}"></span></p>
                                    <section class="question-content-img__wrap clearfix" th:if="!${#arrays.isEmpty(question['imageArr'])}">
                                        <img th:each="_image,itemStart : ${question['imageArr']}" class="question-content-img-box" th:attr="layer-src=${_image}" th:src="${_image}" th:alt="${itemStart.index}">
                                    </section>
                                </section>
                                <section class="hLh30 c-999 fs12">
                                            <span class="mr20">
                                                <small id="thumbBtn" class="q-i-dz-btn c-info pr" th:attr="data-id=${question['id']}" data-toggle="tooltip" data-placement="top" th:attrappend="data-original-title='点赞数：'+ ${question['thumbNum']}">
                                                    <i class="fa fa-caret-up fs18 vam"></i>
                                                    <b class="ml5 vam" th:text="${question['thumbNum']}"></b>
                                                </small>
                                            </span>
                                    <span class="vam ml10 mr10 fs12">|</span>
                                    <span th:if="!${#lists.isEmpty(question['tagList'])}">
                                                <span class="vam">
                                                    <i class="fa fa-tag c-ccc mr5"></i>
                                                    <span th:each="tag, index:${question['tagList']}" th:text="${tag['tagName']}+ '&nbsp;&nbsp;'"></span>
                                                </span>
                                                <span class="vam ml10 mr10 fs12">|</span>
                                            </span>

                                    <span class="vam" th:text="${question['user']['nickname']}"></span>
                                    <span class="vam ml10 mr10 fs12">|</span>
                                    <span class="vam" th:text="${#strings.substring(question['createTime'],0,16)}"></span>
                                    <span class="vam ml10 mr10 fs12">|</span>
                                    <span class="vam" th:text="'浏览 ' + ${question['browseNum']} + ' 次'"></span>
                                    <span class="vam ml10 mr10 fs12">|</span>
                                    <span class="vam" th:text="'围观 ' + ${question['attendNum']} + ' 人'"></span>
                                </section>
                            </article>
                            <hr>
                            <div class="mb20 pb10 ml20">
                                <h3 class="unFw"><span class="fs20 c-info"><i class="fa fa-user-secret mr5"></i> 讲师回答</span></h3>
                                <div class="clearfix mt20">


                                    <!--有回答 开始-->
                                    <div class="media">
                                        <div class="media-left" th:if="${question['completeStatus'] == 2} or  ${question['isFree'] == 2} or ${question['teacherMap']}!=null ">
                                            <a href="javascript:void(0);">
                                                <img class="media-object img-circle" alt="64x64" th:if="${#maps.isEmpty(question['teacherMap'])}" th:src="@{{path}/front/web/v3/img/default/default-face.gif(path=${staticPath})}" width="50" height="50"/>
                                                <img class="media-object img-circle" alt="64x64" th:if="!${#maps.isEmpty(question['teacherMap'])}" th:src="${question['teacherMap']['imageMap']['pcUrlMap']['large']}" width="50" height="50"/>
                                            </a>
                                        </div>
                                        <div class="media-body" th:if="${question['completeStatus'] == 2} or  ${question['isFree'] == 2} or ${question['teacherMap']}!=null">
                                            <h4 class="media-heading">
                                                <a th:href="${#maps.isEmpty(question['teacherMap'])} ? 'javascript:void(0);' : @{/web/teacher/info?teacherId={id}(id=${question['teacherMap']['id']})}"  class="fs14 c-333" th:text="!${#maps.isEmpty(question['teacherMap'])} ? ${question['teacherMap']['teacherName']} : (!${#maps.isEmpty(question['replyUser'])} ? ${question['replyUser']['ralName']} : '系统管理员' )"></a>
                                            </h4>
                                            <span class="fs12 c-ccc" th:text="${#strings.substring(question['replyTime'],0,16)}"></span>
                                        </div>
                                        <th:block th:if="${question['completeStatus'] == 2} or ${question['isFree'] == 2}">
                                            <div class="media-right" th:if="!${#maps.isEmpty(question['teacherMap'])} and !${question['questioner']}">
                                                <section class="vam text-right mt5" style="width: 120px">
                                                    <small class="fs12 c-danger" th:if="${question['teacherMap']['questionFee']}>0"><i class="fa fa-rmb"></i></small>
                                                    <small th:classappend="${question['teacherMap']['questionFee']}>0 ? 'c-danger' : 'c-primary'" class="fs16" th:text="${question['teacherMap']['questionFee']}>0?${question['teacherMap']['questionFee']}:'免费'"></small>
                                                    <small class="fs12 c-999" th:if="${question['teacherMap']['questionFee']}>0">/次</small>
                                                </section>
                                            </div>
                                        </th:block>
                                        <div class="media-right" th:if="${question['completeStatus'] == 2} or ${question['isFree'] != 1} ">
                                                    <span th:if="${question['questioner']} and ${question['completeStatus'] == 2} and ${question['isFree'] != 1}">
                                                        <button id="add-question" th:disabled="!${#lists.isEmpty(question['qaAddList'])} and ${#lists.size(question['qaAddList'])>=2}" class="btn btn-sm btn-danger btn-outline" type="button">继续追问</button>
                                                        <button id="cancle" class="btn btn-sm btn-danger btn-outline" type="button" style="display: none;">取消追问</button>
                                                        <span class="c-999 fs12">只有2次追问</span>
                                                    </span>
                                            <a th:if="(${question['isFree']} != 1) and !${question['questioner']} and !${#maps.isEmpty(question['teacherMap'])}" href="javascript:void(0);" id="qa-ta-but-box" th:attr="data-id=${question['teacherMap']['id']}" data-type="2">
                                                <button class="btn btn-sm btn-danger btn-outline" type="button">向TA提问</button>
                                            </a>

                                        </div>
                                        <div class="mt20" th:if="${question['completeStatus'] == 1}">
                                            <section class="no-data__wrap">
                                                <span class="no-data-ico"></span>
                                                <p class="mt20"><span class="c-666">抱歉，还没有讲师回答~~~</span></p>
                                            </section>
                                        </div>

                                        <!--非提问者且未围观 开始-->
                                        <div class="mt20" th:if="!${question['questioner']} and !${question['attender']} and ${question['completeStatus']==2} and ${question['isFree']==2}">
                                            <section class="question-noPay__wrap">
                                                <span class="noPay-ico"></span>
                                                <h4 class="mt20">
                                                    <span class="fs18 c-999">本问题价值</span>
                                                    <span class="ml10 fs20 c-danger"><i class="fa fa-rmb fs14 mr5" th:text="${question['price']}"></i></span>
                                                </h4>
                                                <div class="mt20 pt10">
                                                    <button type="button" id="attend-btn" class="btn btn-lg btn-w-m btn-danger unRadius" style="width: 220px"> 1元围观 </button>
                                                    <span id="interpret" class="ml10 c-999 hand" data-toggle="tooltip" data-placement="top" data-original-title="所谓 [1元围观] 学员向专业讲师提问，讲师以专业性高质量回答此问题，同时其它学员能付费1元围观此答案。"><i class="fa fa-question-circle fs16"></i></span>
                                                </div>
                                            </section>
                                        </div>
                                        <!--非提问者且未围观 结束-->

                                        <!--回答列表 开始-->
                                        <div th:if="((${question['attender']} or ${question['questioner']} or ${question['isFree']==1}) and ${question['completeStatus']==2})">
                                            <div class="mt20">
                                                <p class="c-666" th:utext="${question['replyContext']}"></p>
                                            </div>
                                            <!--追问区域 开始-->
                                            <div class="mt20 pb10" id="add-question-div" style="display: none">
                                                <section class="c-comment__wrap">
                                                    <form id="addQuestionForm">
                                                        <input type="hidden" name="questionId" th:value="${question['id']}"/>
                                                        <textarea maxlength="200" name="addContext" id="addContext" class="form-control" rows="2" placeholder="在这里输入追问内容，每个问题有两次追问机会"></textarea>
                                                    </form>
                                                </section>
                                                <section class="clearfix mt10">
                                                    <aside class="pull-right">
                                                                <span class="mr10" id="add-question-warning" style="display: none;">
                                                                    <small class="fs12 c-danger"><i class="fa fa-exclamation-circle"></i></small>
                                                                </span>
                                                        <button id="submitAddContext" class="btn btn-danger btn-outline" type="button">提交追问</button>
                                                    </aside>
                                                </section>
                                            </div>
                                            <!--追问区域 结束-->
                                            <!--追答显示区  开始-->
                                            <div class="mt20 pt10 ml20">
                                                <div class="zw-question__wrap pt10">
                                                    <div class="packCourMenu__wrap">
                                                        <div th:if="!${#lists.isEmpty(question['qaAddList'])}" th:each="qaAdd, index:${question['qaAddList']}">
                                                            <section class="packCourTitle mb20 pb10 pr">
                                                                <span class="fs14 c-333" th:text="${qaAdd['addContext']}"></span>
                                                                <aside class="packCourNum">
                                                                    <button class="btn btn-success btn-rounded btn-outline btn-sm" type="button" th:text="${index.count}==1?'追问一':'追问二'"></button>
                                                                </aside>
                                                            </section>
                                                            <section class="packCourTitle mb20 pb10 pr" th:if="!${#strings.isEmpty(qaAdd['addAnswer'])}">
                                                                <span class="fs14 c-333" th:text="${qaAdd['addAnswer']}"></span>
                                                                <aside class="packCourNum">
                                                                    <button class="btn  btn-warning btn-rounded btn-outline btn-sm "  type="button" th:text="${index.count}==1?'追答一':'追答二'"></button>
                                                                </aside>
                                                            </section>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--追答显示区  结束-->
                                        </div>
                                        <!--回答列表 结束-->

                                        <!--围观列表 开始-->
                                        <div class="mt20 pt10" th:if="(${question['questioner']} or ${question['attender']}) and ${question['completeStatus']==2} and ${question['isFree']==2}">
                                            <h5 class="hLh30 text-center mt20"><span class="c-999" th:text="${question['attendNum']} + '人围观'"></span></h5>
                                            <section class="mt20">
                                                <ul class="clearfix wg-face-list text-center">
                                                    <li th:if="!${#lists.isEmpty(question['attendList'])}" th:each="attend:${question['attendList']}">
                                                        <img th:src="${#strings.isEmpty(attend['user']['avatar'])}?@{{path}/front/web/v3/img/userface.gif(path = ${staticPath})}:${attend['user']['avatar']}" idth="32" height="32" alt="" class="img-circle" data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${attend['user']['nickname']}"/>
                                                    </li>
                                                </ul>
                                            </section>
                                            <hr>
                                        </div>
                                        <!--围观列表 结束-->

                                        <!--评论区 开始-->
                                        <div  class="mt20 pt20 mb20" th:if=" ${question['questioner']} or ${question['attender']} or ${question['completeStatus']==2}   or ${question['isFree']==1}">
                                            <h3 class="unFw"><span class="fs20 c-info"><i class="fa fa-group mr5"></i> 评论列表</span></h3>
                                            <div class="mt20 pb10">
                                                <section class="c-comment__wrap">
                                                    <form id="replyForm">
                                                        <input type="hidden" name="questionId" th:value="${question['id']}"/>
                                                        <textarea th:disabled="!(${question['questioner']} or ${question['attender']} or ${question['isFree']==1})"  maxlength="200" name="replyContext" id="replyContext" class="form-control" rows="3" th:placeholder="(!${question['questioner']} and !${question['attender']} and ${question['isFree']}==2)?'“1元围观”后才可以进行评论':'在这里发表自己的评论'" placeholder="" style="resize: none"></textarea>
                                                    </form>
                                                </section>
                                                <section class="clearfix mt10">
                                                    <aside class="pull-right">
                                                        <span class="mr10" id="warning" style="display: none;"><small class="fs12 c-danger"><i class="fa fa-exclamation-circle"></i></small></span>
                                                        <button id="submitReply" th:disabled="!(${question['questioner']} or ${question['attender']} or ${question['isFree']==1}) or ${question[status]!=1} or ${question['completeStatus'] == 3}" class="btn btn-danger btn-outline" type="button">发表评论</button>
                                                    </aside>
                                                    <aside class="pull-left"><span class="fs12 c-999">最多可输入200个字</span></aside>
                                                </section>
                                            </div>
                                            <div class="mt20 pt10">
                                                <th:block th:if="${question['questioner']} or ${question['attender']} or ${question['isFree']==1}">
                                                    <section class="c-head-title">
                                                        <h6>
                                                            <span class="fs16 c-333">全部评论</span>
                                                            <span class="ml10 fs12 c-999">（<span id="reply-count" th:text="${question['replyNum']}"></span>）</span>
                                                        </h6><hr>
                                                    </section>
                                                    <div id="reply-list-context">

                                                    </div>
                                                </th:block>
                                                <div class="mt20" th:if="!${question['questioner']} and !${question['attender']} and !${question['isFree']==1}">
                                                    <section class="no-data__wrap">
                                                        <span class="no-data-ico"></span>
                                                        <p class="mt20"><span class="c-666">抱歉，请先“1元围观”后才可以查看精彩评论~~~</span></p>
                                                    </section>
                                                </div>
                                            </div>
                                        </div>
                                        <!--评论区 结束-->

                                    </div>
                                    <!--有回答 结束-->
                                </div>
                            </div>
                        </div>
                    </section>
                    <aside class="col-sm-3">
                        <div class="mt20 pt10">
                            <div class="toQues-tips">
                                <section class="bg-info text-center"><span class="fs16"><i class="fa fa-child fs24"></i> 提问的正确姿势</span></section>
                                <div class="bg-fb pt10 pl10 pr10 pb10">
                                    <div class="ml10 mr10 mt10 mb10 pb10">
                                        <p class="fs12 c-999 pt10">1、问题要具体、语句通顺，不寻求模糊空洞的答案。广告等违反社区规则的提问被删除并给予处罚。</p>
                                        <p class="fs12 c-999 pt10">2、句式、标点符号使用严谨，问题尽量不含有与问题本身无关的词语（如：跪求大神，急急急）。</p>
                                        <p class="fs12 c-999 pt10">3、打上正确的标签、添加悬赏将有助于更快地获得满意回答。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>
<div data-th-replace="layout/footer"></div>
<script type="text/javascript" th:src="@{{path}/front/web/business/qa/question/qa-question-info.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/qa/thumb/qa-thumb-question.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/qa/question/qa-question-right.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/qa/common/qa-common.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>